<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>听课记录</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/LogCss.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #tb1 tr:hover td {
            background-color: #F3F3F3;
        }
        button:hover{
            cursor:pointer;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>
    <!-- left -->
    <div th:replace="~{commons/left::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body" id="app">
        <!-- 全局遮罩 -->
        <div v-if="courseInfo" id="userInfo">
            <div style="background-color: white;width: 50%;height: 80%;margin-top: 2%;margin-left: 15%;">
                <div style="height: 35px;border-bottom: 1px solid #0C0C0C;">
                    <div><p style="margin-left: 10px;margin-top:7px;font-size: 17px;float: left"><strong>听课记录详情</strong></p></div>
                </div>
                <table style="margin: auto;font-size: 12px;">
                    <tr style="height: 60px">
                        <td style="width: 12%;">课程名称：</td><td><input class="input_td" :value="courseInfoArr.log_course_name"  readonly="readonly"></td>
                        <td style="width: 12%;">任课教师：</td><td><input class="input_td" :value="courseInfoArr.log_course_sta"  readonly="readonly"></td>
                    </tr>
                    <tr style="height: 60px">
                        <td>专业：</td><td><input class="input_td" :value="courseInfoArr.log_course_major"  readonly="readonly"></td>
                        <td>班级：</td><td><input class="input_td" :value="courseInfoArr.log_course_class"  readonly="readonly"></td>
                    </tr>
                    <tr style="height: 60px">
                        <td>教室：</td><td><input class="input_td" :value="courseInfoArr.log_place"  readonly="readonly"></td>
                        <td>时间：</td><td><input class="input_td" :value="courseInfoArr.log_listen_date"  readonly="readonly"> </td>
                    </tr>
                    <tr style="height: 60px"><td>地点：</td><td colspan="3"><input class="input_td" :value="courseInfoArr.log_place"  readonly="readonly"></td></tr>
                    <tr style="height: 100px"><td>内容：</td><td colspan="3"><textarea class="input_td" :value="courseInfoArr.log_course_content"  style="width: 90%;height: 80px;resize:none"  readonly="readonly"></textarea></td></tr>
                    <tr style="height: 60px"><td>反馈：</td><td colspan="3"><input class="input_td" :value="courseInfoArr.log_describe"  readonly="readonly"></td></tr>
                </table>
                <div  style="text-align: center;margin-top:20px;">
                    <button @click="CloseInfoShow()" style="margin-left: 10px;margin-top:5px;height:35px;width: 100px;border: none;color: black;border-radius: 4px 4px 4px 4px;font-size: 8px;">关闭</button>
                </div>
            </div>
        </div>

        <div  class="left_table" style="width: 90%;float: left;">
            <div style="width: 100%;margin-left: 40px;margin-top: 40px;height: 50px;">
                <input v-model="input[10]" placeholder="提交人" style="width: 25%;height:30px;float: left;border-radius: 3px 3px 3px 3px;border-color: #e0e0e0;border-style:solid;border-width:1px;text-indent: 5px;">
                <input type="button" value="查询" class="get" @click="GetStaInfo(input[10])" style="float: left;margin-left: 10px;height:30px;width: 50px;border: none;background-color: rgb(22,155,213);color: white;">
            </div>
            <div>
                <!-- 听课记录表格 -->
                <table style="width: 90%; font-size: 16px;text-align: center;margin: 0 auto;border-collapse: separate;border-spacing: 0;border: 2px #e0e0e0;" id="tb1">
                    <div style="width: 30px">
                        <tr  style="background: #efefef;font-size: 14px">
                            <td style="height: 50px;border-top-left-radius: 12px;">填报时间</td><td>课程名称</td><td>专业</td><td>班级</td>
                            <td>任课老师</td><td>听课时间</td><td>提交人</td><td  style="border-top-right-radius: 12px;">操作</td>
                        </tr>
                    </div>
                    <tr v-for="(course,index) in arr"  style="height: 60px;border-bottom: 2px solid #eaeaea;font-size: 13px;">
                        <td style="color: #00a7d0">{{course.log_course_date}}</td><td>{{course.log_course_name}}</td>
                        <td>{{course.log_course_major}}</td><td>{{course.log_course_class}}</td>
                        <td>{{course.log_course_sta}}</td><td style="color: #00a7d0">{{course.log_listen_date}}</td>
                        <td>{{course.log_sta}}</td>
                        <td>
                            <button @click="showCourseInfo(arr[index])" style="background-color:transparent;border-style:none;color: #00a7d0;">详情</button>
                        </td>
                    </tr>
                </table>

            </div>
        </div>



    </div>

</div>
<script th:src="@{/layui/layui.js}"></script>

<script>
    layui.use('element', function() {
        var element = layui.element;
    });
    new Vue({
            el:"#app",
            data:{
                log:[1,1,1,1],
                arr:[],
                courseInfoArr:[],
                input:[],
                showLogInfo:false,
                courseInfo:false,
                courseUpArr:[],
                showUpData:false,
                userId:[[${session.loginInfo.userId}]],
            },
            mounted(){
                this.GetInfo();
            },
            methods:{
                //获取听课记录
                GetInfo:function () {
                    var that = this;
                    axios.get("http://localhost:8443/LogCourseList").then(function (response) {
                        console.log(response.data);
                        that.arr = response.data;
                    },function (err) {
                        console.log(err);
                    })
                },
                //获取听课记录
                GetStaInfo:function (log_sta) {

                    if (log_sta != null && log_sta!=""){
                        var that = this;
                        axios.get("http://localhost:8443/LogStaCourseList/"+log_sta).then(function (response) {
                        console.log(response.data);
                        that.arr = response.data;
                        },function (err) {
                            console.log(err);
                        })
                    }else {
                        this.GetInfo();
                    }


                },


                //全局遮罩------
                showLogInfoShow:function () {
                    this.input.length = 0;
                    this.showLogInfo = true;
                },

                CloseShow:function () {
                    this.showLogInfo = false;
                },
                //------

                //courseInfo
                showCourseInfo:function(arr){
                    this.courseInfo=true;
                    this.courseInfoArr=arr;
                },

                CloseInfoShow:function () {
                    this.courseInfo=false;
                },
            }
        },
    )
</script>
</body>
</html>